<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="top">
			<view class="search-bar">
				<uni-icons type="search" size="23"></uni-icons>
				<input class="search" type="text" @click="toPath('/pagesB/shousuo/shousuo')" placeholder="搜索目的地 / 景点" />
				<button class="search-button">搜索</button>
			</view>

			<!-- 快捷目的地按钮 -->
			<view class="quick-access">
				<button @click="tagBack" v-for="(tag, index) in quickAccessTags" :key="index"
					class="tag-button">{{ tag }}</button>
			</view>
		</view>

		<!-- 旅游类别按钮 -->
		<view class="container1">
			<view class="card" v-for="(item, index) in services" :key="index" :style="{ backgroundColor: item.color }"
				@click="navBack(index)">
				<view class="icon">{{ item.icon }}</view>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<!-- 横幅广告 -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item @click="toBack" v-for="item in bannrtList">
					<image :src="config.IMG_URL+item.path" mode=""></image>
				</swiper-item>
			</swiper>
		</view>

		<!-- 游记列表 -->
		<view class="post-list">
			<block v-for="(post, index) in posts" :key="index">
				<view class="post" @click="Goback">
					<image :src="post.image" mode="aspectFill" class="post-image"></image>
					<view class="post-info">
						<view class="post-title">{{ post.title }}</view>
						<text class="post-author" style="font-size: 20rpx;">{{ post.author }}</text>
						<text class="post-views" style="font-size: 20rpx;"><uni-icons type="eye"
								size="15"></uni-icons>{{ post.views }}</text>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from "vue"
	// 引入轮播图接口
	import {
		getBannerList
	} from "@/server/index.js"
	import {
		onShow
	} from "@dcloudio/uni-app"
	import config from "@/config/common.js"
	import {
		toPath
	} from "@/utils/toPath.js"
	// import { getBannerList } from "@/api/index"
	const bannrtList = ref([])
	onShow(() => {
		getBannerList('banner').then(e => {
			console.log(e)
			bannrtList.value = e.data
		})
	})
	const tagBack = () => {
		uni.navigateTo({
			url: '/pagesB/seacrch/search'
		})
	}
	const Goback = () => {
		uni.navigateTo({
			url: '/pagesB/wengzhangyouji/index'
		})
	}
	const toBack = () => {
		uni.navigateTo({
			url: '/pagesB/zhutilvyou/zhutilvyou'
		})
	}
	const navBack = (index) => {
		if (index == 4) {

		} else if (index == 5) {

		} else {
			uni.navigateTo({
				url: '/pagesB/zhutilvyou/zhutilvyou'
			})
		}
	}
	const quickAccessTags = reactive(['北京', '故宫', '天安门', '温泉', '世界杯', '景山公园'])
	const to = () => {
		uni.navigateTo({
			url: "/pagesB/shousuo/shousuo"
		})
	}
	const services = ref([{
			name: '亲子游',
			icon: '👨‍👩‍👧‍👦',
			color: '#4CAF50'
		},
		{
			name: '文化游',
			icon: '🏛️',
			color: '#2196F3'
		},
		{
			name: '温泉游',
			icon: '♨️',
			color: '#F44336'
		},
		{
			name: '周边游',
			icon: '🏞️',
			color: '#9C27B0'
		},
		{
			name: '旅游地图',
			icon: '🗺️',
			color: '#673AB7'
		},
		{
			name: '酒店民宿',
			icon: '🏨',
			color: '#E91E63'
		},
		{
			name: '汽车票',
			icon: '🚗',
			color: '#3F51B5'
		},
		{
			name: '飞机票',
			icon: '✈️',
			color: '#FF9800'
		}
	]);


	const posts = reactive([{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p0.png',
			title: '和家人果断在北京续住3天的神仙小院',
			author: '晚风心里吹',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p7.png',
			title: '人少景美“京西小故宫”修缮五年后惊艳开放',
			author: '唐糖唐来了',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p2.png',
			title: '北京海拔2000米的木栈道帝都最高观景平台',
			author: '美腻的猫...',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p11.png',
			title: '别再去坡峰岭了，这里不堵车！',
			author: '美美在旅行',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p4.png',
			title: '北京郊区大自然山景私汤山酒店',
			author: '美美在旅行',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p13.png',
			title: '秋冬京城小奈良动物园里泡温泉',
			author: '万能小夏姐',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p9.png',
			title: '美哭，我宣布这是北京秋日郊游的TOP1',
			author: '小沈阳10...',
			views: '1.9万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5/p30.png',
			title: '再过20天，北京的这里将美成画！',
			author: '旅行的皇后',
			views: '1.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/p6.png',
			title: '北京周末去哪，找到了人少景美的仙境了！',
			author: '晚风心里吹',
			views: '2.1万'
		},
		{
			image: 'https://cdn8.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5/p32.png',
			title: '不出市区就可以全家嗨玩儿一整天',
			author: '星星探旅',
			views: '2.1万'
		}
	])
</script>
<style scoped>
	.top {
		width: 100%;
		background: linear-gradient(#4677EE, #4AA4EA);
		padding-top: 10px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
	}

	.card {
		color: white;
		width: 74px;
		height: 74px;
		padding: 7px;
		/* border-radius: 10px; */
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		/* margin-top: 100px; */

	}

	.icon {
		color: white;
		font-size: 24px;
	}

	.container1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
		margin-top: 200rpx;

	}



	.search-bar {
		width: 600rpx;
		height: 35rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 9px;
		margin-bottom: 10px;
		border-radius: 50rpx;
		margin-left: 60rpx;
	}

	.search-bar input {
		height: 40rpx;
		flex: 1;
		border: none;
		outline: none;
		font-size: 22rpx;
		padding: 5px;

	}

	.search-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		/* padding: 5px 10px; */
		font-size: 22rpx;
		text-align: center;
		border-radius: 50rpx;
	}

	.quick-access {
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}

	.tag-button {
		height: 60rpx;
		background-color: #fff;
		border: 1px solid #ddd;
		padding: 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 2px;
		border-radius: 50rpx;
		font-size: 22rpx;
	}



	.new-tag {
		color: red;
		font-size: 12px;
	}

	.banner {
		position: relative;
		background-color: #fff;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.banner image {
		width: 100%;
		height: 150px;
		border-radius: 5px;
	}

	.banner-text {
		position: absolute;
		bottom: 10px;
		left: 10px;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.5);
		padding: 5px;
		border-radius: 5px;
	}

	.post-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.post {
		width: 45%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 5rpx;
		background-color: #ffffff;
		border-radius: 5px;
		overflow: hidden;
		margin: 15rpx;
	}

	.post-image {
		width: 100%;
		height: 300rpx;
	}

	.post-info {
		padding: 10px;
	}

	.post-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 5px;
	}

	.post-author {
		color: #888888;
		margin-bottom: 5px;
	}

	.post-views {
		color: #cccccc;
	}
</style>